<template>
    <van-popup v-model:show="props.show" position="left" :style="{ width: '60%', height: '100%' }"
        @click-overlay="closePopup">
        <div class="login" v-if="!store.state.isLogin">
            <van-icon name="user-circle-o" size="0.5rem" />
            <span :style="{ marginLeft: '0.2rem' }" @click="goLogin">立即登录</span>
            <van-icon name="arrow" />
        </div>
        <div class="login" v-else>
            <van-icon name="user-circle-o" size="0.5rem" />
            <span :style="{ marginLeft: '0.1rem' }">{{ store.state.userInfo.userName }}</span>
            <van-icon name="arrow" />
        </div>
        <van-cell title="个人中心" is-link icon="location-o" @click="goUserZone" />
        <van-button v-if="store.state.isLogin" block round color="linear-gradient(to right, #ff6034, #ee0a24)"
            size="small" :style="{ marginTop: '0.3rem' }">
            注销/退出登录
        </van-button>
    </van-popup>
</template>

<script lang='ts' setup>
import { useStore } from 'vuex';
import router from '@/router';
const props = defineProps({
    show: Boolean,
})
const emit = defineEmits(['closePopup'])
const store = useStore()
const goLogin = () => {
    router.push({ path: '/login' })
}
const closePopup = () => {
    emit('closePopup', false)
}
const goUserZone = () => {
    router.push('/userZone')
}

</script>
 
<style lang = "less" scoped>
.login {
    display: flex;
    align-items: center;
    padding: 0.3rem;
}
</style>